
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Brain, Target, Trophy, Users } from "lucide-react";

export function LearningPath() {
  const steps = [
    {
      title: "Self Assessment",
      description: "Take personality and learning style quizzes to understand yourself better",
      icon: Brain,
      tags: ["Personality Quiz", "Learning Style", "Strengths"]
    },
    {
      title: "Set Goals",
      description: "Define your learning objectives and create a personalized study plan",
      icon: Target,
      tags: ["Goal Setting", "Planning", "Time Management"]
    },
    {
      title: "Connect & Learn",
      description: "Join study groups and connect with peers who share your interests",
      icon: Users,
      tags: ["Collaboration", "Peer Learning", "Study Groups"]
    },
    {
      title: "Track Progress",
      description: "Monitor your achievements and celebrate your learning milestones",
      icon: Trophy,
      tags: ["Progress Tracking", "Achievements", "Reflection"]
    }
  ];

  return (
    <section className="py-16 bg-background">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">Your Learning Journey</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {steps.map((step, index) => (
            <Card key={step.title} className="relative hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <step.icon className="w-6 h-6 text-primary" />
                </div>
                <CardTitle className="flex items-start gap-2">
                  <span className="text-2xl font-bold text-primary/50">0{index + 1}</span>
                  <span>{step.title}</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground mb-4">{step.description}</p>
                <div className="flex flex-wrap gap-2">
                  {step.tags.map(tag => (
                    <Badge key={tag} variant="secondary" className="bg-accent/50">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
